<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台布局小例子</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
    <style>
        .body{
            margin:0;
            background-color:#dddddd;
        }
        .float-left{
            float:left;
        }
        .float-right{
            float:right;
        }
        .pg-header{
            height:50px;
            background-color:#2459a2;   /*后台一般是全局，不像前台一样需要居中*/
            color:white;
            line-height: 50px;
        }
        .pg-header .logo-css{
            width:250px;
            background-color:#2F96B4;
            text-align:center;
        }
        .pg-header .user-css{
            width:160px;
            padding:0 30px;
            /*background-color:#002a80;*/
        }
        .pg-header .user-css:hover{
            width:160px;
            background-color:#002a80;
            padding:0 30px;

        }
        .pg-header .user-css .a img{
            width:40px;
            height:40px;
            margin-top:5px;
            border-radius:50%;
        }
        .pg-header .user-css .b{
            z-index:10;
            position: absolute;
            top:50px;
            width:160px;
            display:none;
            background-color:aliceblue;
            opacity: 0.5;
            color:black;
        }
        .pg-header .user-css:hover .b{
            display:block;
        }
        .pg-header .user-css .b a{
            display:block;
        }
        .pg-header .icon{
            padding:0 20px;
        }
        .pg-header .icon:hover{
            background-color:#002a80;
        }
        .pg-content .menu{
            position:absolute;
            top:50px;
            left:0;
            bottom:0;
            width:250px;
            background-color:#FFdd66;
        }
        .pg-content .content{
            position:absolute;
            top:50px;
            right:0;
            bottom:0;
            left:250px;
            background-color:#1f6377;
            overflow: auto;
        }
    </style>
</head>
<body class="body">
    <!--页面顶端部分-->
    <div class="pg-header">
        <div class="logo-css float-left">
            <a>Beam</a>
            <i class="fa fa-bookmark-o" aria-hidden="true"></i>
        </div>

        <div class="user-css float-right">
            <a class="a" herf="#">
                <img src="./images/touxiang.jpg" />
            </a>
            <div class="b">
                <a herf="#">我的资料</a>
                <a herf="#">注销</a>
            </div>
        </div>
        <div class="icon">
            <i class="fa fa-bell-o" aria-hidden="true">
                <span>6</span>
            </i>
            <i class="fa fa-weixin" aria-hidden="true">
                <span>8</span>
            </i>
        </div>
    </div>
    <!--页面中间内容部分-->
    <div class="pg-content">
        <div class="menu float-left">菜单</div>
        <div class="content float-right">
            <p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p>
            <p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p>
            <p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p>
            <p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p>
            <p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p>
            <p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p>
            <p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p>
            <p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p>
            <p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p>
            <p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p>
            <p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p>
            <p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p>
            <p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p><p>11111111111</p>

        </div>
    </div>
    <!--页面底部部分-->
    <div class="pg-footer">大家好</div>
</body>
</html>